body {
  font-family: "Grandstander", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

@keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #ffffff;
  overflow: hidden;
}

.background span {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 30;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, box-shadow;
}


.background span:nth-child(0) {
  color: #ff7a7a;
  top: 89%;
  left: 79%;
  animation-duration: 81s;
  animation-delay: -49s;
  transform-origin: 18vw -6vh;
  box-shadow: 100vmin 0 13.001248744350756vmin currentColor;
}
.background span:nth-child(1) {
  color: #8aff8c;
  top: 64%;
  left: 67%;
  animation-duration: 21s;
  animation-delay: -52s;
  transform-origin: -23vw 23vh;
  box-shadow: -100vmin 0 12.558561084275738vmin currentColor;
}
.background span:nth-child(2) {
  color: #808eff;
  top: 37%;
  left: 60%;
  animation-duration: 185s;
  animation-delay: -2s;
  transform-origin: -5vw 11vh;
  box-shadow: 100vmin 0 12.906209314217833vmin currentColor;
}
.background span:nth-child(3) {
  color: #ff7a7a;
  top: 25%;
  left: 74%;
  animation-duration: 70s;
  animation-delay: -116s;
  transform-origin: 19vw -7vh;
  box-shadow: -100vmin 0 13.298144493888557vmin currentColor;
}
.background span:nth-child(4) {
  color: #ff7a7a;
  top: 81%;
  left: 20%;
  animation-duration: 171s;
  animation-delay: -25s;
  transform-origin: 9vw -21vh;
  box-shadow: 100vmin 0 13.223192573972103vmin currentColor;
}
.background span:nth-child(5) {
  color: #ff7a7a;
  top: 31%;
  left: 53%;
  animation-duration: 16s;
  animation-delay: -94s;
  transform-origin: 3vw -15vh;
  box-shadow: 100vmin 0 13.23281109602558vmin currentColor;
}
.background span:nth-child(6) {
  color: #808eff;
  top: 5%;
  left: 52%;
  animation-duration: 74s;
  animation-delay: -3s;
  transform-origin: -24vw -4vh;
  box-shadow: 100vmin 0 12.656203544491445vmin currentColor;
}
.background span:nth-child(7) {
  color: #808eff;
  top: 66%;
  left: 29%;
  animation-duration: 50s;
  animation-delay: -182s;
  transform-origin: -8vw -9vh;
  box-shadow: -100vmin 0 13.216421566678148vmin currentColor;
}
.background span:nth-child(8) {
  color: #808eff;
  top: 95%;
  left: 92%;
  animation-duration: 86s;
  animation-delay: -127s;
  transform-origin: -3vw 21vh;
  box-shadow: -100vmin 0 12.97914778559147vmin currentColor;
}
.background span:nth-child(9) {
  color: #808eff;
  top: 6%;
  left: 57%;
  animation-duration: 130s;
  animation-delay: -198s;
  transform-origin: 2vw 0vh;
  box-shadow: -100vmin 0 12.820651369975844vmin currentColor;
}
.background span:nth-child(10) {
  color: #8aff8c;
  top: 64%;
  left: 91%;
  animation-duration: 166s;
  animation-delay: -179s;
  transform-origin: 8vw 2vh;
  box-shadow: -100vmin 0 12.9980006618082vmin currentColor;
}
.background span:nth-child(11) {
  color: #8aff8c;
  top: 8%;
  left: 88%;
  animation-duration: 57s;
  animation-delay: -121s;
  transform-origin: 1vw -10vh;
  box-shadow: -100vmin 0 13.479890613992454vmin currentColor;
}
.background span:nth-child(12) {
  color: #808eff;
  top: 8%;
  left: 42%;
  animation-duration: 21s;
  animation-delay: -148s;
  transform-origin: 0vw 2vh;
  box-shadow: -100vmin 0 13.2622359055303vmin currentColor;
}
.background span:nth-child(13) {
  color: #808eff;
  top: 86%;
  left: 99%;
  animation-duration: 92s;
  animation-delay: -34s;
  transform-origin: 4vw -1vh;
  box-shadow: 100vmin 0 13.457107783530304vmin currentColor;
}
.background span:nth-child(14) {
  color: #ff7a7a;
  top: 7%;
  left: 8%;
  animation-duration: 87s;
  animation-delay: -18s;
  transform-origin: 15vw 10vh;
  box-shadow: -100vmin 0 13.187851760968261vmin currentColor;
}
.background span:nth-child(15) {
  color: #8aff8c;
  top: 10%;
  left: 62%;
  animation-duration: 74s;
  animation-delay: -80s;
  transform-origin: 21vw 1vh;
  box-shadow: 100vmin 0 13.085672735539019vmin currentColor;
}
.background span:nth-child(16) {
  color: #808eff;
  top: 100%;
  left: 94%;
  animation-duration: 205s;
  animation-delay: -91s;
  transform-origin: -17vw 0vh;
  box-shadow: -100vmin 0 12.918607025629624vmin currentColor;
}
.background span:nth-child(17) {
  color: #8aff8c;
  top: 1%;
  left: 56%;
  animation-duration: 34s;
  animation-delay: -171s;
  transform-origin: -17vw -23vh;
  box-shadow: 100vmin 0 13.397852035446526vmin currentColor;
}
.background span:nth-child(18) {
  color: #8aff8c;
  top: 72%;
  left: 93%;
  animation-duration: 183s;
  animation-delay: -197s;
  transform-origin: 17vw 15vh;
  box-shadow: -100vmin 0 12.939758112860508vmin currentColor;
}
.background span:nth-child(19) {
  color: #ff7a7a;
  top: 77%;
  left: 68%;
  animation-duration: 46s;
  animation-delay: -22s;
  transform-origin: -4vw 9vh;
  box-shadow: -100vmin 0 12.942049471603575vmin currentColor;
}